<template>
  <el-card class="sku-list">
    <el-table :data="skuList" border v-loading="loading">
      <el-table-column type="index" label="序号" align="center" width="90px" />
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column prop="address" align="center" label="默认图片" >
        <template v-slot="{row}">
          <el-image :src="row.skuDefaultImg" style="width: 100px;height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(kg)" />
      <el-table-column prop="price" label="价格(元)" />
      <el-table-column  align="center" label="操作" width="230">
        <template v-slot="{row}">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="上架"
            placement="top"
            v-if="row.isSale === 1"
          >
            <el-button size="small" :icon="Top" type="success" @click="toSaveOn(row)"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="下架"
            placement="top"
            v-else
          >
            <el-button size="small" :icon="Bottom" type="info" @click="toSaveCancel(row)"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="top"
          >
            <el-button size="small" :icon="Edit" type="primary"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看详情"
            placement="top"
          >
            <el-button  size="small" :icon="InfoFilled" type="info" @click="checkSku(row)"></el-button>
          </el-tooltip>
          <el-popconfirm title="Are you sure to delete this?"  @confirm="deleteSku(row)">
            <template #reference>
              <div style="display: inline-block;margin-left: 12px">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top"
              >
                  <el-button size="small" :icon="Delete" type="danger"></el-button>
              </el-tooltip>
              </div>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9, 12]"
      layout="prev, pager, next, jumper,->, sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

     <!--抽屉-->
    <el-drawer v-model="drawer" title="sku信息查看" size="50%">
      <el-row :gutter="10">
        <el-col :span="6"><div>名称</div></el-col>
        <el-col :span="18"><div>{{skuDetail.skuName}}</div></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"><div>sku描述</div></el-col>
        <el-col :span="18">
          <div>{{skuDetail.skuDesc}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"><div>价格</div></el-col>
        <el-col :span="18">
          <div>{{ skuDetail.price }}.00元</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"><div>平台属性</div></el-col>
        <el-col :span="18">
          <el-tag type="success" v-for="skuAttrValue in skuDetail.skuAttrValueList" :key="skuAttrValue.id">{{skuAttrValue.attrName}}-{{skuAttrValue.valueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"><div>销售属性</div></el-col>
        <el-col :span="18">
          <el-tag type="success" v-for="skuSaleList in skuDetail.skuSaleAttrValueList" :key="skuSaleList.id">{{skuSaleList.saleAttrName}}-{{skuSaleList.saleAttrValueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"><div>商品图片</div></el-col>
        <el-col :span="18">
          <el-carousel :interval="4000" type="card" height="200px" >
<!--            <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">-->
<!--              <el-image :src="item.imgUrl"></el-image>-->
<!--            </el-carousel-item>-->   点击的第一条第一张不显示
                <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id" v-if="skuDetail.skuImageList">
                  <el-image :src="item.imgUrl"></el-image>
                </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Sku"
};
</script>
<script lang="ts" setup>
import { Top,Bottom,Edit, Delete, InfoFilled } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { deleteSkuData, getSkuDetail, reqGetSku, reqSkuOnSale, reqSkuOnSaleCancel } from "@/api/product/sku";
import  {ElMessage} from "element-plus";
import sku from "@/views/product/sku/index.vue";
//分页
const pageSize = ref<number>(3)
const currentPage = ref<number>(1)
const total = ref<number>(10)
// 定义一个变量，存储sku列表数据
const skuList = ref([])
// 定义变量 存储sku详情数据
const skuDetail = reactive({})
const loading = ref(true)
// 抽屉
const drawer = ref(false)
// 1.请求sku数据列表
const getSkuList = async ()=>{
  const result = await reqGetSku(currentPage.value,pageSize.value)
  skuList.value = result.records
  loading.value = false
}
// 页面加载完成就请求
onMounted(()=>{
  getSkuList()
})
//2.改变条数
const handleSizeChange = (val: number) => {
  console.log('pagesize',val)
  pageSize.value = val
  getSkuList()
}
//3. 改变当前页码
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  getSkuList()
}
// 4.上架
const toSaveOn = async (row)=>{
  await reqSkuOnSale(row.id)
  row.isSale = 0
  ElMessage('上架成功')
}
// 5.下架
const toSaveCancel = async (row)=>{
  await reqSkuOnSaleCancel(row.id)
  row.isSale = 1
  ElMessage('下架成功')
}
// 6.删除sku
const deleteSku =async (row)=>{
  await deleteSkuData(row.id)
  ElMessage('删除sku成功')
  getSkuList()
}
//7.查看sku详情显示抽屉
const checkSku = async (row)=>{
  Object.assign(skuDetail,{})
  drawer.value = true;
  const result = await  getSkuDetail(row.id)
  Object.assign(skuDetail,result)
  // skuDetail.value = await  getSkuDetail(row.id)
}
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.sku-list {
.el-row {
  font-size: 20px;
// height:32px;
  margin-top: 8px;
.el-col-6 {
  text-align: right;
}
.el-carousel__item {
  background-color: #fff;
  text-align: center;
.el-image {
  height: 100%;
}
}
}
}
</style>